<!DOCTYPE html>
<html class="wide wow-animation" lang="en"  xmlns:th="http://www.thymeleaf.org">
<head>
  <title>欢迎来到商城</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <script th:src="@{/cdn-cgi/apps/head/3ts2ksMwXvKRuG480KNifJ2_JNM.js}"></script><link rel="icon" th:href="@{/images/favicon.ico}" type="image/x-icon">
  <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700%7CLato%7CKalam:300,400,700">
  <link rel="stylesheet" th:href="@{/css/bootstrap.css}">
  <link rel="stylesheet" th:href="@{/css/fonts.css}">
  <link rel="stylesheet" th:href="@{/css/style.css}">
  <style>
    .ie-panel{display: none;background: #212121;padding: 10px 0;box-shadow: 3px 3px 5px 0 rgba(0,0,0,.3);clear: both;text-align:center;position: relative;z-index: 1;} html.ie-10 .ie-panel, html.lt-ie-10 .ie-panel {display: block;}
    .L_center_img img{display:inline-block;max-width:100%;}
  </style>
</head>
<body>
<div class="ie-panel"><a th:href="@{http://windows.microsoft.com/en-US/internet-explorer/}"><img th:src="@{/images/ie8-panel/warning_bar_0000_us.jpg}" height="42" width="820" alt="You are using an outdated browser. For a faster, safer browsing experience, upgrade for free today."></a></div>
<div class="preloader">
  <div class="preloader-body">
    <div class="cssload-bell">
      <div class="cssload-circle">
        <div class="cssload-inner"></div>
      </div>
      <div class="cssload-circle">
        <div class="cssload-inner"></div>
      </div>
      <div class="cssload-circle">
        <div class="cssload-inner"></div>
      </div>
      <div class="cssload-circle">
        <div class="cssload-inner"></div>
      </div>
      <div class="cssload-circle">
        <div class="cssload-inner"></div>
      </div>
    </div>
  </div>
</div>
<div class="page">
  <!-- Page Header-->
  <header class="section page-header header-creative-wrap context-dark">
    <!-- RD Navbar-->
    <div class="rd-navbar-wrap">
      <nav class="rd-navbar rd-navbar-creative rd-navbar-creative-2" data-layout="rd-navbar-fixed" data-sm-layout="rd-navbar-fixed" data-md-layout="rd-navbar-fixed" data-md-device-layout="rd-navbar-fixed" data-lg-layout="rd-navbar-static" data-lg-device-layout="rd-navbar-fixed" data-xl-layout="rd-navbar-static" data-xl-device-layout="rd-navbar-static" data-xxl-layout="rd-navbar-static" data-xxl-device-layout="rd-navbar-static" data-lg-stick-up-offset="100px" data-xl-stick-up-offset="112px" data-xxl-stick-up-offset="132px" data-lg-stick-up="true" data-xl-stick-up="true" data-xxl-stick-up="true">
        <div class="rd-navbar-collapse-toggle rd-navbar-fixed-element-1" data-rd-navbar-toggle=".rd-navbar-collapse"><span></span></div>
        <div class="rd-navbar-aside-outer">
          <div class="rd-navbar-aside">
            <div class="rd-navbar-collapse">
              <ul class="contacts-classic">
                <li><span class="contacts-classic-title">Call us:</span>+(86) 13434985070
                </li>
                <li>1057071216@qq.com</li>
              </ul><a class="rd-navbar-basket rd-navbar-basket-mobile fl-bigmug-line-shopping202" href="#"><span>2</span></a>
            </div>
            <!-- RD Navbar Panel-->
            <div class="rd-navbar-panel">
              <!-- RD Navbar Toggle-->
              <button class="rd-navbar-toggle" data-rd-navbar-toggle=".rd-navbar-nav-wrap"><span></span></button>
              <!-- RD Navbar Brand-->
              <div class="rd-navbar-brand">
                <!--Brand--><a class="brand" th:href="@{/index.html}"><img class="brand-logo-dark" th:src="@{/images/logobai.png}" alt="" width="117" height="41"/><img class="brand-logo-light" th:src="@{/images/logobai.png}" alt="" width="117" height="41"/></a>
              </div>
            </div>
            <div class="rd-navbar-aside-element">
              <!-- RD Navbar Search-->
              <div class="rd-navbar-search rd-navbar-search-2">
                <button class="rd-navbar-search-toggle rd-navbar-fixed-element-3" data-rd-navbar-toggle=".rd-navbar-search"><span></span></button>
                <form class="rd-search" th:action="@{/search-results.html}" data-search-live="rd-search-results-live" method="GET">
                  <div class="form-wrap">
                    <input class="rd-navbar-search-form-input form-input" id="rd-navbar-search-form-input" type="text" name="s" autocomplete="off"/>
                    <label class="form-label" for="rd-navbar-search-form-input">Search...</label>
                    <div class="rd-search-results-live" id="rd-search-results-live"></div>
                    <button class="rd-search-form-submit fl-bigmug-line-search74" type="submit"></button>
                  </div>
                </form>
              </div>
              <!-- RD Navbar Basket-->
              <div class="rd-navbar-fixed-element-2 select-inline">
                <a th:if="${session.user}" class="team-info-figure" th:href="@{/personal-center}">
                  <img th:src="@{${session.user.pictureUrl}}" width=50 height=50>
                </a>
                <a th:unless="${session.user}" class="team-info-figure" th:href="@{/personal-center}">
                  <img th:src="@{/img/UserHead/headpicturedefalut.jpg}" width=50 height=50>
                </a>
              </div>
            </div>
          </div>
        </div>
        <div class="rd-navbar-main-outer">
          <div class="rd-navbar-main">
            <div class="rd-navbar-nav-wrap">
              <ul class="rd-navbar-nav">
                <li class="rd-nav-item"><a class="rd-nav-link" th:href="@{/home.html}">首页</a></li>
                <li class="rd-nav-item active"><a class="rd-nav-link" th:href="@{/grid-shop.html}">商城</a></li>
                <li class="rd-nav-item"><a class="rd-nav-link" th:href="@{/order-page.html}">求购广场</a></li>
                <li class="rd-nav-item"><a class="rd-nav-link" th:href="@{/freeshare.html}">免费分享区</a></li>
                <li class="rd-nav-item"><a class="rd-nav-link" th:href="@{/blog-list.html}">合作推广</a>
                  <ul class="rd-menu rd-navbar-dropdown">
                    <li class="rd-dropdown-item"><a class="rd-dropdown-link" th:href="@{/templates/single-post.html}">我要提建议</a></li>
                    <li class="rd-dropdown-item"><a class="rd-dropdown-link" th:href="@{/templates/single-post.html}">商务合作</a></li>
                  </ul>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </nav>
    </div>
  </header>
  <section class="breadcrumbs-custom">
    <div class="parallax-container" data-parallax-img="images/bg-about-2.jpg">
      <div class="breadcrumbs-custom-body parallax-content context-dark">
      </div>
    </div>
    <div class="breadcrumbs-custom-footer">
      <div class="container">
        <ul class="breadcrumbs-custom-path">
          <li><a th:href="@{/index.html}">首页</a></li>
          <li class="active">商城</li>
        </ul>
      </div>
    </div>
  </section>
  <!-- Section Shop-->
  <section class="section section-xxl bg-default text-md-left">
    <div class="container">
      <div class="row row-50">
        <div class="col-lg-4 col-xl-3">
          <div class="aside row row-30 row-md-50 justify-content-md-between">
            <div class="aside-item col-12">
              <h6 class="aside-title">选择价格区间</h6>
              <!-- RD Range-->
              <div class="rd-range" data-min="0" data-max="999" data-min-diff="100" data-start="[0, 100]" data-step="1" data-tooltip="false" data-input=".rd-range-input-value-1" data-input-2=".rd-range-input-value-2"></div>
              <div class="group-xs group-justify">
                <div>
                  <button class="button button-sm button-primary button-zakaria" type="button" id="mybtn1">筛选</button>
                </div>
                <div>
                  <div class="rd-range-wrap">
                    <div class="rd-range-title">价格:</div>
                    <div class="rd-range-form-wrap"><span>￥</span>
                      <input class="rd-range-input rd-range-input-value-1" type="text" name="value-1" id="low">
                    </div>
                    <div class="rd-range-divider"></div>
                    <div class="rd-range-form-wrap"><span>￥</span>
                      <input class="rd-range-input rd-range-input-value-2" type="text" name="value-2" id="heigh">
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="aside-item col-sm-6 col-md-5 col-lg-12">
              <h6 class="aside-title">商品分类</h6>
              <ul class="list-shop-filter">
                <li>
                  <label class="checkbox-inline">
                    <input name="input-group-radio" value="0" type="checkbox">全部
                  </label><span class="list-shop-filter-number" th:text="'('+${numbMap.get(0)}+')'">(18)</span>
                </li>
                <li th:each="k:${kindList}">
                  <label class="checkbox-inline">
                    <input name="input-group-radio" th:value="${k.id}" type="checkbox" th:text="${k.kind}">
                  </label><span class="list-shop-filter-number" th:text="'('+${numbMap.get(k.id)}+')'">(8)</span>
                </li>
              </ul>

              <!--ajax-->
              <script>

                var apath1 = "\n" +
                        "            <div class=\"col-sm-6 col-md-4 col-lg-6 col-xl-4\" th:each=\"item:${items}\">\n" +
                        "              <!-- Product-->\n" +
                        "              <article class=\"product\">\n" +
                        "                <div class=\"product-body\">\n" +
                        "                  <div class=\"product-figure\">\n" +
                        "                    "
                var bimg   = "<img th:src=\"@{/img/ComPicture/{pi}.jpg(pi=${item.id})}\""

                var cpath2 =" height=\"180\"/>\n" +
                        "                  </div>\n" +
                        "                  <h5 class=\"product-title\">"

                var dherf1 ="<a th:href=\"@{/single-product.html}\">"

                var ename  ="Carrots"

                var fpath3 ="</a></h5>\n" +
                        "                  <div class=\"product-price-wrap\">\n" +
                        "                    <div class=\"product-price product-price-old\" th:text=\"${item.price}+'元'\">"

                var gmoney1="$30.00"

                var hpath4 ="</div>\n" +
                        "                    <div class=\"product-price\" th:text=\"${item.price+20}+'元'\">"

                var imoney2="$23.00" +
                        "</div>\n" +
                        "                  </div>\n" +
                        "                  <div class=\"product-button-wrap\">\n" +
                        "                    <div class=\"product-button\"><a class=\"button button-secondary button-zakaria fl-bigmug-line-search74\" "

                var khref2 ="th:href=\"@{/single-product.html?id={id}(id=${item.id})}\""

                var lpath4 ="></a></div>\n" +
                        "                    <div class=\"product-button\"><a class=\"button button-primary button-zakaria fl-bigmug-line-shopping202\" href=\"#\"></a></div>\n" +
                        "                  </div>\n" +
                        "              </article>\n" +
                        "            </div>"

                var str = "" ;

                makehtml = function (o){
                  bimg   ="<img src=\"/img/ComPicture/"+o.id+".jpg\""
                  dherf1 ="<a href=\"/single-product.html?id="+o.id+"\">"
                  ename  =o.name
                  gmoney1=o.o_price
                  imoney2=o.price
                  khref2 ="<a href=\"/single-product.html?id="+o.id+"\">"
                  return apath1+bimg+cpath2+dherf1+ename+fpath3+gmoney1+hpath4+imoney2+khref2+lpath4
                }

                additems = function (o) {
                  var HTML = document.getElementById("items").innerHTML
                  var append = makehtml(o) ;
                  document.getElementById("items").innerHTML = HTML + append ;
                }

                window.onload = function(){
                  var group=document.getElementsByName("input-group-radio");
                  var list = {} ;
                  //alert(group.length) ;
                  for(var i=0;i<group.length;i++) {
                    group[i].onchange=function() {
                      if(this.checked) {
                        str+=this.value+" ";
                      }else {
                        str=str.replace(this.value+" ","");
                      }
                    }
                  }
                }

                var xmlHttpRequest;//定义一个变量用于存放XMLHttpRequest对象
                //定义一个用于创建XMLHttpRequest对象的函数
                function createXMLHttpRequest(){
                  if(window.ActiveXObject){//IE浏览器的创建方式
                    xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
                  }else if(window.XMLHttpRequest){//Netscape浏览器中的创建方式
                    xmlHttpRequest = new XMLHttpRequest();
                  }
                }
                //响应HTTP请求状态变化的函数
                function httpStateChange(){
                  if(xmlHttpRequest.readyState == 4){//判断异步调用是否成功,若成功开始局部更新数据
                    if(xmlHttpRequest.status == 200||xmlHttpRequest.status == 0){
                      var obj = JSON.parse(xmlHttpRequest.responseText) ;
                      //将子目录下的所有东西都删了
                      document.getElementById("items").innerHTML="" ;
                      for(var i=0; i<obj.length;i++){
                        additems(obj[i]) ;
                      }
                    } else {//如果异步调用未成功,弹出警告框,并显示出错信息
                      alert("error:HTTP状态码为:"+xmlHttpRequest.status + ",HTTP状态信息为:" + xmlHttpRequest.statusText);
                    }
                  }
                }
                //异步调用服务器段数据
                function getData(name,value){
                  createXMLHttpRequest();//创建XMLHttpRequest对象
                  if(xmlHttpRequest!=null){
                    var low = document.getElementById("low").value;
                    var heigh = document.getElementById("heigh").value;
                    var url = "http://localhost:8092/selective?kindlist="+str+"&low="+low+"&heigh="+heigh
                    xmlHttpRequest.open("get",url,true);//创建HTTP请求
                    xmlHttpRequest.onreadystatechange = httpStateChange;//HTTP请求状态变化的函数 
                    xmlHttpRequest.send(null);//发送请求
                  }
                }

                document.getElementById("mybtn1").onclick = function (){
                  getData() ;
                }

              </script>

              <!-- RD Search Form-->
              <form class="rd-search form-search" action="search-results.html" method="GET">
                <div class="form-wrap">
                  <input class="form-input" id="search-form" type="text" name="s" autocomplete="off">
                  <label class="form-label" for="search-form">搜索商品...</label>
                  <button class="button-search fl-bigmug-line-search74" type="submit"></button>
                </div>
              </form>
            </div>
          </div>
        </div>
        <div class="col-lg-8 col-xl-9">
          <div class="product-top-panel group-md">
            <p class="product-top-panel-title"></p>
            <div>
              <div class="group-sm group-middle">
                <div class="product-top-panel-sorting">
                  <select>
                    <option value="1">按日期排序</option>
                    <option value="2">按热度排序</option>
                    <option value="3">按名称排序</option>
                  </select>
                </div>
                <div class="product-view-toggle"><a class="mdi mdi-apps product-view-link product-view-grid active" th:href="@{/grid-shop.html}"></a><a class="mdi mdi-format-list-bulleted product-view-link product-view-list" href="#"></a></div>
              </div>
            </div>
          </div>
          <!---->
          <div class="row row-30 row-lg-50" id="items">
            <div class="col-sm-6 col-md-4 col-lg-6 col-xl-4" th:each="item:${items}">
              <!-- Product-->
              <article class="product">
                <div class="product-body">
                  <div class="product-figure">
                    <img th:src="@{/img/ComPicture/{pi}.jpg(pi=${item.id})}" height="180"/>
                  </div>
                  <h5 class="product-title" th:text="${item.name}"><a th:href="@{/single-product.html}">Carrots</a></h5>
                  <div class="product-price-wrap">
                    <div class="product-price product-price-old" th:text="${item.o_price}+'元'">$30.00</div>
                    <div class="product-price" th:text="${item.price}+'元'">$23.00</div>
                  </div>
                  <div th:if="${item.status} eq '1'">
                    <span class="product-badge product-badge-sale">已售</span>
                  </div>
                  <div th:if="${item.status} ne '1'">
                    <span class="product-badge product-badge-new">待售</span>
                  </div>
                  <div class="product-button-wrap">
                    <div class="product-button"><a class="button button-secondary button-zakaria fl-bigmug-line-search74" title="查看详情" th:href="@{/single-product.html?id={id}(id=${item.id})}"></a></div>
                  </div>
              </article>
            </div>

            <!---->
            <div class="col-sm-6 col-md-4 col-lg-6 col-xl-4">
              <!-- Product-->
              <article class="product">
                <div class="product-body">
                  <div class="product-figure"><img th:src="@{/images/product-2-155x145.png}" alt="" width="155" height="145"/>
                  </div>
                  <h5 class="product-title"><a th:href="@{/single-product.html}">Sparkling drinks</a></h5>
                  <div class="product-price-wrap">
                    <div class="product-price">$13.00</div>
                  </div>
                </div><span class="product-badge product-badge-new">New</span>
                <div class="product-button-wrap">
                  <div class="product-button"><a class="button button-secondary button-zakaria fl-bigmug-line-search74" th:href="@{/single-product.html}"></a></div>
                  <div class="product-button"><a class="button button-primary button-zakaria fl-bigmug-line-shopping202" href="#"></a></div>
                </div>
              </article>
            </div>
          </div>
          <div class="pagination-wrap">
            <!-- Bootstrap Pagination-->
            <nav aria-label="Page navigation">
              <ul class="pagination">
                <li class="page-item page-item-control disabled"><a class="page-link" href="#" aria-label="Previous"><span class="icon" aria-hidden="true"></span></a></li>
                <li class="page-item active"><span class="page-link">1</span></li>
                <li class="page-item"><a class="page-link" href="#">2</a></li>
                <li class="page-item"><a class="page-link" href="#">3</a></li>
                <li class="page-item page-item-control"><a class="page-link" href="#" aria-label="Next"><span class="icon" aria-hidden="true"></span></a></li>
              </ul>
            </nav>
          </div>
        </div>
      </div>
    </div>
  </section>
  <!-- Page Footer-->
  <footer class="section footer-modern footer-modern-2">
    <div class="footer-modern-body section-xl context-dark">
      <div class="container">
        <div class="row row-40 row-md-50 justify-content-xl-between">
          <div class="col-md-10 col-lg-3 col-xl-4 wow fadeInRight">
            <div class="inset-xl-right-70 block-1">
              <h5 class="footer-modern-title">仅供展示</h5>
              <div class="row row-10 gutters-10" data-lightgallery="group">
                <div class="col-4 col-sm-2 col-lg-4">
                  <!-- Thumbnail Minimal--><img th:src="@{/images/grid-gallery-1-93x93.jpg}" alt="" width="93" height="93"/></img>
                </div>
                <div class="col-4 col-sm-2 col-lg-4">
                  <!-- Thumbnail Minimal--><img th:src="@{/images/grid-gallery-2-93x93.jpg}" alt="" width="93" height="93"/></img>
                </div>
                <div class="col-4 col-sm-2 col-lg-4">
                  <!-- Thumbnail Minimal--><img th:src="@{/images/grid-gallery-3-93x93.jpg}" alt="" width="93" height="93"/></img>
                </div>
                <div class="col-4 col-sm-2 col-lg-4">
                  <!-- Thumbnail Minimal--><img th:src="@{/images/grid-gallery-4-93x93.jpg}" alt="" width="93" height="93"/></img>
                </div>
                <div class="col-4 col-sm-2 col-lg-4">
                  <!-- Thumbnail Minimal--><img th:src="@{/images/grid-gallery-5-93x93.jpg}" alt="" width="93" height="93"/></img>
                </div>
                <div class="col-4 col-sm-2 col-lg-4">
                  <!-- Thumbnail Minimal--><img th:src="@{/images/grid-gallery-6-93x93.jpg}" alt="" width="93" height="93"/></img>
                </div>
              </div>
            </div>
          </div>
          <div class="col-sm-6 col-md-7 col-lg-5 wow fadeInRight" data-wow-delay=".1s">
            <h5 class="footer-modern-title">防范与举报</h5>
            <ul class="footer-modern-list footer-modern-list-2 d-sm-inline-block d-md-block">
              <li><a href=http://www.cyberpolice.cn/wfjb/ target=_blank>网络警察提醒您</a></li>
              <li><a href=https://www.12377.cn/ target=_blank>网上有害信息举报专区</a></li>
              <li><a href=https://www.12377.cn/node_548446.htm target=_blank>网络举报APP下载</a></li>
              <li><a href=http://www.shdf.gov.cn/shdf/channels/740.html target="_blank">扫黄打非网举报专区</a></li>
            </ul>
          </div>
          <div class="col-sm-6 col-md-5 col-lg-4 col-xl-3 wow fadeInRight" data-wow-delay=".2s">
            <h5 class="footer-modern-title">联系我们</h5>
            <ul class="contacts-creative">
              <li>
                <div class="unit unit-spacing-sm flex-column flex-md-row">
                  <div class="unit-left"><span class="icon mdi mdi-map-marker"></span></div>
                  <div class="unit-body">惠州学院<br/>北苑2栋527</div>
                </div>
              </li>
              <li>
                <div class="unit unit-spacing-sm flex-column flex-md-row">
                  <div class="unit-left"><span class="icon mdi mdi-phone"></span></div>
                  <div class="unit-body">+(86) 17817680004</div>
                </div>
              </li>
              <li>
                <div class="unit unit-spacing-sm flex-column flex-md-row">
                  <div class="unit-left"><span class="icon mdi mdi-email-outline"></span></div>
                  <div class="unit-body">499751933@qq.com</div>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </footer>
</div>
<div class="snackbars" id="form-output-global"></div>
<script th:src="@{/js/core.min.js}"></script>
<script th:src="@{/js/script.js}"></script>
</body>
</html>